<template>
  <div :style="{width:'100%',height:'90%'}" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
      let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
      that.axios.post(`${that.$store.state.http}/list/getUserTotal`).then(res => {
        let data = res.data.data;
        var option = {
          title: {
            text: `总计：${res.data.total}`,
            textStyle: {
              color: "#fff"
            }
          },
          textStyle: {
            color: "#fff"
          },
          tooltip: {
            //提示框，鼠标悬浮交互时的信息提示
            show: true,
            trigger: "axis"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            borderColor: "#ccc"
          },
          animation: true,
          xAxis: [
            {
              type: "category",
              data: data.names,
              axisLine: {
                lineStyle: {
                  color: "#fff"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              color: "#fff",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              type: "bar",
              stack: "人数",
              data: data.list,
              barWidth: 15,
              itemStyle: {
                normal: {
                  color: "#02bcbc"
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    }
  }
};
</script>

<style>
</style>